<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>项目详情 - YOLO Vision AI Platform</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- Tailwind配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CFC9',
                        success: '#52C41A',
                        warning: '#FAAD14',
                        danger: '#FF4D4F',
                        dark: '#1D2129',
                        'dark-2': '#4E5969',
                        'light-1': '#F2F3F5',
                        'light-2': '#E5E6EB',
                        'light-3': '#C9CDD4'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 2px 8px rgba(0, 0, 0, 0.08)',
                        'dropdown': '0 4px 16px rgba(0, 0, 0, 0.12)',
                        'hover': '0 4px 12px rgba(22, 93, 255, 0.15)',
                    }
                },
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .scrollbar-hide {
                scrollbar-width: none;
                -ms-overflow-style: none;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .text-gradient {
                background-clip: text;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }
            .transition-all-300 {
                transition: all 300ms ease-in-out;
            }
            .card-hover {
                @apply hover:shadow-hover hover:-translate-y-0.5 transition-all-300;
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-50 text-dark">
    <!-- 主内容区域 -->
    <div class="p-6">
        <!-- 面包屑导航 -->
        <div class="flex items-center text-sm text-dark-2 mb-6">
            <a href="home.html" class="hover:text-primary transition-all-300">首页</a>
            <i class="fa fa-angle-right mx-2 text-light-3"></i>
            <a href="home.html" class="hover:text-primary transition-all-300">我的项目</a>
            <i class="fa fa-angle-right mx-2 text-light-3"></i>
            <span class="text-dark font-medium" id="breadcrumb-project-name">智能安防检测</span>
        </div>
        
        <!-- 页面标题和操作区 -->
        <div class="mb-6 flex flex-col md:flex-row md:items-center md:justify-between gap-4">
            <div>
                <h1 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-dark" id="project-title">智能安防检测</h1>
                <div class="flex items-center mt-2 space-x-4">
                    <span class="px-2 py-1 text-xs rounded-full bg-warning/10 text-warning" id="project-status">进行中</span>
                    <div class="flex items-center space-x-1 text-dark-2 text-sm">
                        <i class="fa fa-calendar"></i>
                        <span id="project-created">创建于 2023-05-18</span>
                    </div>
                    <div class="flex items-center space-x-1 text-dark-2 text-sm">
                        <i class="fa fa-user"></i>
                        <span id="project-creator">创建人：张工程师</span>
                    </div>
                </div>
            </div>
            
            <div class="flex space-x-3">
                <button class="bg-white text-primary border border-primary px-4 py-2 rounded-lg hover:bg-primary/5 transition-all-300 font-medium flex items-center">
                    <i class="fa fa-pencil mr-2"></i> 编辑项目
                </button>
                <button class="bg-white text-primary border border-primary px-4 py-2 rounded-lg hover:bg-primary/5 transition-all-300 font-medium flex items-center">
                    <i class="fa fa-share-alt mr-2"></i> 分享
                </button>
                <button class="bg-white text-primary border border-primary px-4 py-2 rounded-lg hover:bg-primary/5 transition-all-300 font-medium flex items-center">
                    <i class="fa fa-ellipsis-v"></i>
                </button>
            </div>
        </div>
        
        <!-- 项目流程进度 -->
        <div class="bg-white rounded-xl shadow-card p-6 mb-6">
            <h2 class="text-lg font-bold mb-4">项目进度</h2>
            
            <div class="relative">
                <!-- 进度条 -->
                <div class="flex items-center justify-between mb-8">
                    <div class="absolute left-0 right-0 top-1/2 -translate-y-1/2 h-1 bg-light-1 -z-10"></div>
                    <div class="absolute left-0 top-1/2 -translate-y-1/2 h-1 bg-primary rounded-full -z-10" style="width: 65%" id="progress-bar"></div>
                    
                    <!-- 步骤1: 需求分析 (YOLOv11优化重点) -->
                    <div class="flex flex-col items-center relative group">
                        <div class="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center mb-2">
                            <i class="fa fa-tasks"></i>
                        </div>
                        <span class="text-sm font-medium">需求分析</span>
                        <div class="absolute bottom-full mb-2 bg-dark/90 text-white text-xs px-2 py-1 rounded whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity">
                            定义检测目标与精度要求
                        </div>
                    </div>
                    
                    <!-- 步骤2: 数据准备 (YOLOv11优化重点) -->
                    <div class="flex flex-col items-center relative group">
                        <div class="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center mb-2">
                            <i class="fa fa-database"></i>
                        </div>
                        <span class="text-sm font-medium">数据准备</span>
                        <div class="absolute bottom-full mb-2 bg-dark/90 text-white text-xs px-2 py-1 rounded whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity">
                            高质量标注与数据增强
                        </div>
                    </div>
                    
                    <!-- 步骤3: 模型配置与训练 (YOLOv11优化重点) -->
                    <div class="flex flex-col items-center relative group">
                        <div class="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center mb-2">
                            <i class="fa fa-cogs"></i>
                        </div>
                        <span class="text-sm font-medium">模型配置与训练</span>
                        <div class="absolute bottom-full mb-2 bg-dark/90 text-white text-xs px-2 py-1 rounded whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity">
                            v11特有参数与超参数调优
                        </div>
                    </div>
                    
                    <!-- 步骤4: 模型评估 (YOLOv11优化重点) -->
                    <div class="flex flex-col items-center relative group">
                        <div class="w-8 h-8 rounded-full bg-light-2 text-dark-2 flex items-center justify-center mb-2">
                            <i class="fa fa-line-chart"></i>
                        </div>
                        <span class="text-sm font-medium text-dark-2">模型评估</span>
                        <div class="absolute bottom-full mb-2 bg-dark/90 text-white text-xs px-2 py-1 rounded whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity">
                            效率与精度双维度评估
                        </div>
                    </div>
                    
                    <!-- 步骤5: 优化与部署 (YOLOv11优化重点) -->
                    <div class="flex flex-col items-center relative group">
                        <div class="w-8 h-8 rounded-full bg-light-2 text-dark-2 flex items-center justify-center mb-2">
                            <i class="fa fa-rocket"></i>
                        </div>
                        <span class="text-sm font-medium text-dark-2">优化与部署</span>
                        <div class="absolute bottom-full mb-2 bg-dark/90 text-white text-xs px-2 py-1 rounded whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity">
                            量化压缩与推理优化
                        </div>
                    </div>
                </div>
                
                <!-- 进度百分比 -->
                <div class="flex justify-between items-center">
                    <div>
                        <p class="text-sm text-dark-2">当前进度</p>
                        <div class="flex items-center space-x-2 mt-1">
                            <span class="text-2xl font-bold" id="progress-percentage">65%</span>
                            <span class="text-sm text-dark-2">完成于 2023-07-10</span>
                        </div>
                    </div>
                    
                    <!-- 动态操作按钮区域 -->
                    <div class="flex space-x-3" id="progress-actions">
                        <!-- 不同进度阶段的按钮将通过JavaScript动态显示 -->
                        <!-- 需求分析阶段 -->
                        <div id="action-analysis" class="hidden">
                            <button class="bg-primary text-white px-5 py-2 rounded-lg hover:bg-primary/90 transition-all-300 font-medium">
                                <i class="fa fa-file-text-o mr-2"></i> 填写目标
                            </button>
                        </div>
                        <!-- 数据准备阶段 -->
                        <div id="action-data" class="hidden">
                            <button class="bg-primary text-white px-5 py-2 rounded-lg hover:bg-primary/90 transition-all-300 font-medium">
                                <i class="fa fa-database mr-2"></i> 数据集管理
                            </button>
                        </div>
                        <!-- 模型训练阶段 -->
                        <div id="action-training" class="hidden">
                            <button class="bg-white text-primary border border-primary px-4 py-2 rounded-lg hover:bg-primary/5 transition-all-300 font-medium">
                                <i class="fa fa-pause mr-2"></i> 暂停
                            </button>
                            <button class="bg-primary text-white px-5 py-2 rounded-lg hover:bg-primary/90 transition-all-300 font-medium">
                                <i class="fa fa-play mr-2"></i> 继续训练
                            </button>
                        </div>
                        <!-- 模型评估阶段 -->
                        <div id="action-evaluation" class="hidden">
                            <button class="bg-primary text-white px-5 py-2 rounded-lg hover:bg-primary/90 transition-all-300 font-medium">
                                <i class="fa fa-line-chart mr-2"></i> 评估报告
                            </button>
                            <button class="bg-white text-primary border border-primary px-4 py-2 rounded-lg hover:bg-primary/5 transition-all-300 font-medium">
                                <i class="fa fa-refresh mr-2"></i> 重新训练
                            </button>
                        </div>
                        <!-- 部署上线阶段 -->
                        <div id="action-deployment" class="hidden">
                            <button class="bg-white text-primary border border-primary px-4 py-2 rounded-lg hover:bg-primary/5 transition-all-300 font-medium mr-3">
                                <i class="fa fa-cogs mr-2"></i> 模型优化
                            </button>
                            <button class="bg-primary text-white px-5 py-2 rounded-lg hover:bg-primary/90 transition-all-300 font-medium">
                                <i class="fa fa-rocket mr-2"></i> 部署上线
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 项目内容区域 -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
            <!-- 左侧：项目概览 -->
            <div class="lg:col-span-1 space-y-6">
                <!-- 项目信息卡片 -->
                <div class="bg-white rounded-xl shadow-card p-6" id="project-info-card">
                    <h2 class="text-lg font-bold mb-4">项目信息</h2>
                    
                    <div class="space-y-4">
                        <div>
                            <h3 class="text-sm font-medium text-dark-2 mb-1">项目描述</h3>
                            <p class="text-sm leading-relaxed" id="project-description">该项目旨在开发一个智能安防检测系统，用于实时检测监控视频中的异常行为和可疑人员，提高安保效率和准确性。系统将使用YOLOv8算法进行目标检测，并结合行为识别算法实现异常行为检测。</p>
                        </div>
                        
                        <div class="border-t border-light-1 pt-4">
                            <h3 class="text-sm font-medium text-dark-2 mb-3">项目基本信息</h3>
                            
                            <div class="space-y-3">
                                <div class="flex justify-between items-center">
                                    <span class="text-sm text-dark-2">项目ID</span>
                                    <span class="text-sm font-medium" id="project-id">#PRJ-2023-001</span>
                                </div>
                                
                                <div class="flex justify-between items-center">
                                    <span class="text-sm text-dark-2">项目类型</span>
                                    <span class="text-sm font-medium" id="project-type">目标检测</span>
                                </div>
                                
                                <div class="flex justify-between items-center">
                                    <span class="text-sm text-dark-2">创建时间</span>
                                    <span class="text-sm font-medium" id="project-date-created">2023-05-18</span>
                                </div>
                                
                                <div class="flex justify-between items-center">
                                    <span class="text-sm text-dark-2">截止日期</span>
                                    <span class="text-sm font-medium" id="project-date-due">2023-07-30</span>
                                </div>
                                
                                <div class="flex justify-between items-center">
                                    <span class="text-sm text-dark-2">模型版本</span>
                                    <span class="text-sm font-medium text-primary" id="project-model-version">YOLOv11</span>
                                </div>
                                
                                <!-- YOLOv11特有信息 -->
                                <div class="flex justify-between items-center">
                                    <span class="text-sm text-dark-2">精度目标</span>
                                    <span class="text-sm font-medium">mAP 0.85+</span>
                                </div>
                                
                                <div class="flex justify-between items-center">
                                    <span class="text-sm text-dark-2">速度要求</span>
                                    <span class="text-sm font-medium">60 FPS+</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 数据集信息卡片 -->
                <div class="bg-white rounded-xl shadow-card p-6" id="dataset-info-card">
                    <h2 class="text-lg font-bold mb-4">数据集信息</h2>
                    
                    <div class="space-y-4">
                        <div class="flex items-center space-x-3">
                            <div class="w-10 h-10 rounded-lg bg-secondary/10 flex items-center justify-center">
                                <i class="fa fa-picture-o text-secondary"></i>
                            </div>
                            <div>
                                <p class="font-medium" id="dataset-name">安防监控数据集</p>
                                <p class="text-xs text-dark-2" id="dataset-count">12,480 张图片</p>
                            </div>
                        </div>
                        
                        <div class="border-t border-light-1 pt-4">
                            <h3 class="text-sm font-medium text-dark-2 mb-3">数据集统计 (YOLOv11优化要点)</h3>
                            
                            <div class="space-y-4">
                                <div>
                                    <div class="flex justify-between items-center mb-1">
                                        <span class="text-sm text-dark-2">已标注图片</span>
                                        <span class="text-sm font-medium">100%</span>
                                    </div>
                                    <div class="w-full bg-light-1 rounded-full h-2">
                                        <div class="bg-success h-2 rounded-full" style="width: 100%"></div>
                                    </div>
                                </div>
                                
                                <div>
                                    <div class="flex justify-between items-center mb-1">
                                        <span class="text-sm text-dark-2">训练集</span>
                                        <span class="text-sm font-medium">8,736 张</span>
                                    </div>
                                    <div class="w-full bg-light-1 rounded-full h-2">
                                        <div class="bg-primary h-2 rounded-full" style="width: 70%"></div>
                                    </div>
                                </div>
                                
                                <div>
                                    <div class="flex justify-between items-center mb-1">
                                        <span class="text-sm text-dark-2">验证集</span>
                                        <span class="text-sm font-medium">1,872 张</span>
                                    </div>
                                    <div class="w-full bg-light-1 rounded-full h-2">
                                        <div class="bg-primary h-2 rounded-full" style="width: 15%"></div>
                                    </div>
                                </div>
                                
                                <div>
                                    <div class="flex justify-between items-center mb-1">
                                        <span class="text-sm text-dark-2">测试集</span>
                                        <span class="text-sm font-medium">1,872 张</span>
                                    </div>
                                    <div class="w-full bg-light-1 rounded-full h-2">
                                        <div class="bg-primary h-2 rounded-full" style="width: 15%"></div>
                                    </div>
                                </div>
                                
                                <!-- YOLOv11数据增强指标 -->
                                <div class="border-t border-light-1 pt-4">
                                    <h3 class="text-sm font-medium text-dark-2 mb-3">数据增强配置</h3>
                                    
                                    <div class="grid grid-cols-2 gap-2">
                                        <div class="flex items-center">
                                            <input type="checkbox" checked class="mr-2 h-4 w-4 text-primary rounded">
                                            <span class="text-xs">马赛克增强</span>
                                        </div>
                                        <div class="flex items-center">
                                            <input type="checkbox" checked class="mr-2 h-4 w-4 text-primary rounded">
                                            <span class="text-xs">混合增强</span>
                                        </div>
                                        <div class="flex items-center">
                                            <input type="checkbox" checked class="mr-2 h-4 w-4 text-primary rounded">
                                            <span class="text-xs">随机缩放</span>
                                        </div>
                                        <div class="flex items-center">
                                            <input type="checkbox" checked class="mr-2 h-4 w-4 text-primary rounded">
                                            <span class="text-xs">颜色抖动</span>
                                        </div>
                                        <div class="flex items-center">
                                            <input type="checkbox" checked class="mr-2 h-4 w-4 text-primary rounded">
                                            <span class="text-xs">旋转变换</span>
                                        </div>
                                        <div class="flex items-center">
                                            <input type="checkbox" checked class="mr-2 h-4 w-4 text-primary rounded">
                                            <span class="text-xs">光照增强</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <button class="w-full bg-white text-primary border border-primary px-4 py-2 rounded-lg hover:bg-primary/5 transition-all-300 font-medium text-sm flex items-center justify-center">
                            <i class="fa fa-table mr-2"></i> 查看数据集详情
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 右侧：项目详细信息 -->
            <div class="lg:col-span-2 space-y-6">
                <!-- 项目成员 -->
                <div class="bg-white rounded-xl shadow-card p-6" id="project-members-card">
                    <div class="flex justify-between items-center mb-4">
                        <h2 class="text-lg font-bold">项目成员</h2>
                        <button class="text-primary hover:text-primary/80 text-sm font-medium">
                            <i class="fa fa-plus mr-1"></i> 邀请成员
                        </button>
                    </div>
                    
                    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                        <!-- 成员1 -->
                        <div class="flex flex-col items-center p-3 rounded-lg hover:bg-light-1 transition-all-300">
                            <img src="https://picsum.photos/id/1005/100/100" alt="张工程师" class="w-14 h-14 rounded-full mb-2 object-cover">
                            <p class="font-medium text-center">张工程师</p>
                            <p class="text-xs text-primary bg-primary/10 px-2 py-0.5 rounded-full">负责人</p>
                        </div>
                        
                        <!-- 成员2 -->
                        <div class="flex flex-col items-center p-3 rounded-lg hover:bg-light-1 transition-all-300">
                            <img src="https://picsum.photos/id/1001/100/100" alt="李工程师" class="w-14 h-14 rounded-full mb-2 object-cover">
                            <p class="font-medium text-center">李工程师</p>
                            <p class="text-xs text-secondary bg-secondary/10 px-2 py-0.5 rounded-full">开发者</p>
                        </div>
                        
                        <!-- 成员3 -->
                        <div class="flex flex-col items-center p-3 rounded-lg hover:bg-light-1 transition-all-300">
                            <img src="https://picsum.photos/id/1002/100/100" alt="王工程师" class="w-14 h-14 rounded-full mb-2 object-cover">
                            <p class="font-medium text-center">王工程师</p>
                            <p class="text-xs text-secondary bg-secondary/10 px-2 py-0.5 rounded-full">开发者</p>
                        </div>
                        
                        <!-- 成员4 -->
                        <div class="flex flex-col items-center p-3 rounded-lg hover:bg-light-1 transition-all-300">
                            <img src="https://picsum.photos/id/1003/100/100" alt="赵工程师" class="w-14 h-14 rounded-full mb-2 object-cover">
                            <p class="font-medium text-center">赵工程师</p>
                            <p class="text-xs text-dark-2 bg-dark-2/10 px-2 py-0.5 rounded-full">测试</p>
                        </div>
                    </div>
                </div>
                
                <!-- 资源统计 -->
                <div class="bg-white rounded-xl shadow-card p-6" id="resource-usage-card">
                    <h2 class="text-lg font-bold mb-4">资源使用统计</h2>
                    
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
                        <!-- 存储使用 -->
                        <div class="border border-light-1 rounded-lg p-4">
                            <div class="flex items-center space-x-2 mb-3">
                                <div class="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center">
                                    <i class="fa fa-database text-primary"></i>
                                </div>
                                <h3 class="font-medium">存储使用</h3>
                            </div>
                            <div class="flex items-end space-x-2">
                                <span class="text-2xl font-bold">4.2</span>
                                <span class="text-dark-2 mb-1">GB / 10GB</span>
                            </div>
                            <div class="w-full bg-light-1 rounded-full h-2 mt-2">
                                <div class="bg-primary h-2 rounded-full" style="width: 42%"></div>
                            </div>
                        </div>
                        
                        <!-- GPU使用 -->
                        <div class="border border-light-1 rounded-lg p-4">
                            <div class="flex items-center space-x-2 mb-3">
                                <div class="w-8 h-8 rounded-lg bg-secondary/10 flex items-center justify-center">
                                    <i class="fa fa-microchip text-secondary"></i>
                                </div>
                                <h3 class="font-medium">GPU使用时长</h3>
                            </div>
                            <div class="flex items-end space-x-2">
                                <span class="text-2xl font-bold">128</span>
                                <span class="text-dark-2 mb-1">小时</span>
                            </div>
                            <div class="w-full bg-light-1 rounded-full h-2 mt-2">
                                <div class="bg-secondary h-2 rounded-full" style="width: 65%"></div>
                            </div>
                        </div>
                        
                        <!-- 标注任务 -->
                        <div class="border border-light-1 rounded-lg p-4">
                            <div class="flex items-center space-x-2 mb-3">
                                <div class="w-8 h-8 rounded-lg bg-success/10 flex items-center justify-center">
                                    <i class="fa fa-check-square-o text-success"></i>
                                </div>
                                <h3 class="font-medium">标注任务</h3>
                            </div>
                            <div class="flex items-end space-x-2">
                                <span class="text-2xl font-bold">100</span>
                                <span class="text-dark-2 mb-1">%</span>
                            </div>
                            <div class="w-full bg-light-1 rounded-full h-2 mt-2">
                                <div class="bg-success h-2 rounded-full" style="width: 100%"></div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 资源使用趋势 -->
                    <div>
                        <h3 class="font-medium mb-3">存储使用趋势</h3>
                        <div class="h-60 w-full">
                            <canvas id="storageChart"></canvas>
                        </div>
                    </div>
                </div>
                
                <!-- 模型训练详情 -->
                <div class="bg-white rounded-xl shadow-card p-6" id="training-metrics-card">
                    <div class="flex justify-between items-center mb-4">
                        <h2 class="text-lg font-bold">模型训练详情</h2>
                        <div class="flex space-x-3">
                            <button class="bg-white text-primary border border-primary px-3 py-1.5 rounded-lg hover:bg-primary/5 transition-all-300 font-medium text-sm">
                                <i class="fa fa-download mr-1"></i> 导出结果
                            </button>
                            <button class="bg-white text-primary border border-primary px-3 py-1.5 rounded-lg hover:bg-primary/5 transition-all-300 font-medium text-sm">
                                <i class="fa fa-ellipsis-v"></i>
                            </button>
                        </div>
                    </div>
                    
                    <!-- 训练状态 -->
                    <div class="mb-6">
                        <div class="flex justify-between items-center mb-2">
                            <span class="text-sm text-dark-2">训练进度</span>
                            <span class="text-sm font-medium" id="training-percentage">65%</span>
                        </div>
                        <div class="w-full bg-light-1 rounded-full h-2">
                            <div class="bg-primary h-2 rounded-full" style="width: 65%" id="training-progress-bar"></div>
                        </div>
                        <div class="flex justify-between items-center mt-2 text-sm text-dark-2">
                            <span>Epoch: <span id="current-epoch">25</span>/<span id="total-epochs">50</span></span>
                            <span>Batch: <span id="current-batch">120</span>/<span id="total-batch">240</span></span>
                            <span>时间: <span id="elapsed-time">04:25:18</span></span>
                        </div>
                    </div>
                    
                    <!-- 训练控制按钮 -->
                    <div class="flex justify-end space-x-3 mb-6">
                        <button class="bg-white text-dark-2 border border-light-2 px-4 py-2 rounded-lg hover:bg-light-1 transition-all-300 font-medium text-sm">
                            <i class="fa fa-pause mr-2"></i> 暂停
                        </button>
                        <button class="bg-white text-danger border border-danger px-4 py-2 rounded-lg hover:bg-danger/5 transition-all-300 font-medium text-sm">
                            <i class="fa fa-stop mr-2"></i> 终止
                        </button>
                    </div>
                    
                    <!-- 训练参数 -->
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
                        <div class="border border-light-1 rounded-lg p-4">
                            <h3 class="text-sm font-medium text-dark-2 mb-3">YOLOv11模型配置</h3>
                            <ul class="space-y-2 text-sm">
                                <li class="flex justify-between"><span class="text-dark-2">模型架构</span><span class="text-primary">YOLOv11-s</span></li>
                                <li class="flex justify-between"><span class="text-dark-2">输入尺寸</span><span>800×800 (v11推荐)</span></li>
                                <li class="flex justify-between"><span class="text-dark-2">预训练权重</span><span>COCO</span></li>
                                <li class="flex justify-between"><span class="text-dark-2">优化器</span><span>AdamW</span></li>
                                <li class="flex justify-between"><span class="text-dark-2">特征提取器</span><span>CSPDarknet-53</span></li>
                                <li class="flex justify-between"><span class="text-dark-2">注意力机制</span><span>CBAM + ECA</span></li>
                            </ul>
                        </div>
                        
                        <div class="border border-light-1 rounded-lg p-4">
                            <h3 class="text-sm font-medium text-dark-2 mb-3">YOLOv11训练参数</h3>
                            <ul class="space-y-2 text-sm">
                                <li class="flex justify-between"><span class="text-dark-2">学习率</span><span>0.0001 (v11推荐低值)</span></li>
                                <li class="flex justify-between"><span class="text-dark-2">批大小</span><span>16</span></li>
                                <li class="flex justify-between"><span class="text-dark-2">Epochs</span><span>100 (v11建议增加)</span></li>
                                <li class="flex justify-between"><span class="text-dark-2">数据增强</span><span>启用 (v11增强)</span></li>
                                <li class="flex justify-between"><span class="text-dark-2">学习率调度</span><span>Cosine Annealing</span></li>
                                <li class="flex justify-between"><span class="text-dark-2">权重衰减</span><span>0.0005</span></li>
                            </ul>
                        </div>
                        
                        <div class="border border-light-1 rounded-lg p-4">
                            <h3 class="text-sm font-medium text-dark-2 mb-3">YOLOv11评估指标</h3>
                            <ul class="space-y-2 text-sm">
                                <li class="flex justify-between"><span class="text-dark-2">当前mAP</span><span class="text-primary font-medium">0.876</span></li>
                                <li class="flex justify-between"><span class="text-dark-2">当前准确率</span><span class="text-primary font-medium">0.921</span></li>
                                <li class="flex justify-between"><span class="text-dark-2">当前召回率</span><span class="text-primary font-medium">0.897</span></li>
                                <li class="flex justify-between"><span class="text-dark-2">当前损失</span><span class="text-primary font-medium">0.083</span></li>
                                <li class="flex justify-between"><span class="text-dark-2">推理速度</span><span class="text-primary font-medium">68 FPS</span></li>
                                <li class="flex justify-between"><span class="text-dark-2">模型大小</span><span class="text-primary font-medium">12.8 MB</span></li>
                            </ul>
                        </div>
                    </div>
                    
                    <!-- 训练指标图表 -->
                    <div>
                        <h3 class="font-medium mb-3">训练指标</h3>
                        <div class="h-80 w-full">
                            <canvas id="trainingChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 活动记录 -->
                <div class="bg-white rounded-xl shadow-card p-6 mb-6" id="activity-log-card">
            <h2 class="text-lg font-bold mb-4">活动记录</h2>
            
            <div class="space-y-4">
                <!-- 活动1 -->
                <div class="flex space-x-4">
                    <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0">
                        <i class="fa fa-cog text-primary"></i>
                    </div>
                    <div>
                        <p class="text-sm"><span class="font-medium">张工程师</span> 开始了模型训练任务 <span class="text-dark-2">3小时前</span></p>
                        <p class="text-xs text-dark-2 mt-1">使用YOLOv8-s架构，学习率0.001，批大小16，训练50个epoch</p>
                    </div>
                </div>
                
                <!-- 活动2 -->
                <div class="flex space-x-4">
                    <div class="w-8 h-8 rounded-full bg-secondary/10 flex items-center justify-center flex-shrink-0">
                        <i class="fa fa-upload text-secondary"></i>
                    </div>
                    <div>
                        <p class="text-sm"><span class="font-medium">李工程师</span> 上传了新的数据集 <span class="text-dark-2">昨天 14:32</span></p>
                        <p class="text-xs text-dark-2 mt-1">上传了3,200张新的安防监控图片，已自动划分到训练集</p>
                    </div>
                </div>
                
                <!-- 活动3 -->
                <div class="flex space-x-4">
                    <div class="w-8 h-8 rounded-full bg-success/10 flex items-center justify-center flex-shrink-0">
                        <i class="fa fa-check-circle text-success"></i>
                    </div>
                    <div>
                        <p class="text-sm"><span class="font-medium">王工程师</span> 完成了数据集标注任务 <span class="text-dark-2">昨天 09:15</span></p>
                        <p class="text-xs text-dark-2 mt-1">完成了全部12,480张图片的标注工作，准确率99.2%</p>
                    </div>
                </div>
                
                <!-- 活动4 -->
                <div class="flex space-x-4">
                    <div class="w-8 h-8 rounded-full bg-dark-2/10 flex items-center justify-center flex-shrink-0">
                        <i class="fa fa-user-plus text-dark-2"></i>
                    </div>
                    <div>
                        <p class="text-sm"><span class="font-medium">张工程师</span> 邀请了 <span class="font-medium">赵工程师</span> 加入项目 <span class="text-dark-2">2023-07-05 16:48</span></p>
                        <p class="text-xs text-dark-2 mt-1">赵工程师将作为测试角色参与项目</p>
                    </div>
                </div>
                
                <!-- 活动5 -->
                <div class="flex space-x-4">
                    <div class="w-8 h-8 rounded-full bg-warning/10 flex items-center justify-center flex-shrink-0">
                        <i class="fa fa-pencil text-warning"></i>
                    </div>
                    <div>
                        <p class="text-sm"><span class="font-medium">张工程师</span> 更新了项目信息 <span class="text-dark-2">2023-07-05 10:22</span></p>
                        <p class="text-xs text-dark-2 mt-1">修改了项目描述和截止日期</p>
                    </div>
                </div>
            </div>
            
            <button class="w-full mt-4 py-2 text-primary hover:text-primary/80 text-sm font-medium">
                查看更多活动记录
            </button>
        </div>
    </div>
    
    <!-- JavaScript功能实现 -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    
    <script>
        // 项目数据对象，存储不同项目的详细信息
        const projectData = {
            '1': {
                id: '1',
                name: '智能安防检测',
                projectId: '#PRJ-2023-001',
                status: '进行中',
                description: '该项目旨在开发一个智能安防检测系统，用于实时检测监控视频中的异常行为和可疑人员，提高安保效率和准确性。系统采用最新的YOLOv11算法，利用其在精度和速度方面的优势，实现高效准确的目标检测和行为识别。',
                type: '目标检测',
                created: '2023-05-18',
                due: '2023-07-30',
                creator: '张工程师',
                modelVersion: 'YOLOv11',
                progress: 65,
                datasetName: '安防监控数据集',
                datasetCount: '12,480 张图片',
                currentEpoch: 50,
                totalEpochs: 100,
                currentBatch: 240,
                totalBatch: 480,
                elapsedTime: '04:25:18'
            },
            '2': {
                id: '2',
                name: '车辆识别系统',
                projectId: '#PRJ-2023-002',
                status: '进行中',
                description: '该项目开发一个高精度的车辆识别系统，能够识别不同类型的车辆，并提取车辆特征信息。系统将应用于智能交通管理和停车场管理等场景。',
                type: '图像分类',
                created: '2023-06-02',
                due: '2023-08-15',
                creator: '李工程师',
                modelVersion: 'MobileNetV3',
                progress: 35,
                datasetName: '车辆数据集',
                datasetCount: '8,750 张图片',
                currentEpoch: 15,
                totalEpochs: 50,
                currentBatch: 85,
                totalBatch: 240,
                elapsedTime: '02:15:05'
            },
            '3': {
                id: '3',
                name: '交通标志检测与识别',
                projectId: '#PRJ-2023-003',
                status: '已完成',
                description: '该项目开发一个综合的交通标志检测与识别系统，能够实时检测道路上的交通标志并识别其含义。系统采用组合任务架构，先检测后分类。',
                type: '组合任务',
                created: '2023-04-10',
                due: '2023-06-01',
                creator: '王工程师',
                modelVersion: 'YOLOv7',
                progress: 100,
                datasetName: '交通标志数据集',
                datasetCount: '5,432 张图片',
                currentEpoch: 50,
                totalEpochs: 50,
                currentBatch: 240,
                totalBatch: 240,
                elapsedTime: '12:45:30'
            },
            '4': {
                id: '4',
                name: '火灾与烟雾检测系统',
                projectId: '#PRJ-2023-004',
                status: '进行中',
                description: '该项目开发一个用于早期火灾与烟雾检测的系统，能够在火灾初期检测到烟雾和火焰，及时发出警报。系统将应用于公共场所、工业场所等需要消防安全监控的场景。',
                type: '目标检测',
                created: '2023-06-15',
                due: '2023-09-01',
                creator: '张工程师',
                modelVersion: 'YOLOv8',
                progress: 15,
                datasetName: '火灾与烟雾数据集',
                datasetCount: '6,210 张图片',
                currentEpoch: 8,
                totalEpochs: 50,
                currentBatch: 45,
                totalBatch: 240,
                elapsedTime: '01:30:45'
            }
        };
        
        // 从URL获取项目ID
        function getProjectId() {
            const urlParams = new URLSearchParams(window.location.search);
            return urlParams.get('id') || '1'; // 默认显示ID为1的项目
        }
        
        // 根据进度动态显示内容 - YOLOv11优化版
        function updateContentByProgress(progress) {
            // 隐藏所有操作按钮
            document.getElementById('action-analysis').classList.add('hidden');
            document.getElementById('action-data').classList.add('hidden');
            document.getElementById('action-training').classList.add('hidden');
            document.getElementById('action-evaluation').classList.add('hidden');
            document.getElementById('action-deployment').classList.add('hidden');
            
            // 获取所有信息卡片
            const projectInfoCard = document.querySelector('#project-info-card');
            const datasetInfoCard = document.querySelector('#dataset-info-card');
            const projectMembersCard = document.querySelector('#project-members-card');
            const resourceUsageCard = document.querySelector('#resource-usage-card');
            const trainingMetricsCard = document.querySelector('#training-metrics-card');
            const activityLogCard = document.querySelector('#activity-log-card');
            
            // 默认隐藏所有卡片
            if (projectInfoCard) projectInfoCard.classList.add('hidden');
            if (datasetInfoCard) datasetInfoCard.classList.add('hidden');
            if (projectMembersCard) projectMembersCard.classList.add('hidden');
            if (resourceUsageCard) resourceUsageCard.classList.add('hidden');
            if (trainingMetricsCard) trainingMetricsCard.classList.add('hidden');
            if (activityLogCard) activityLogCard.classList.add('hidden');
            
            // 先移除所有YOLOv11提示
            document.querySelectorAll('.yolo11-tip').forEach(tip => tip.remove());
            
            // 根据进度显示对应的按钮和卡片
            if (progress < 20) {
                // 需求分析阶段 - YOLOv11优化重点：明确精度与速度双目标
                document.getElementById('action-analysis').classList.remove('hidden');
                
                // 显示项目信息和成员卡片，添加YOLOv11特有的需求分析提示
                if (projectInfoCard) {
                    projectInfoCard.classList.remove('hidden');
                    // 动态添加YOLOv11特有提示
                    const projectInfoHeader = projectInfoCard.querySelector('h2');
                    const tipElement = document.createElement('div');
                    tipElement.className = 'yolo11-tip bg-primary/5 border-l-4 border-primary p-3 mb-4';
                    tipElement.innerHTML = '<p class="text-sm"><i class="fa fa-info-circle text-primary mr-2"></i><strong>YOLOv11优化提示:</strong> 请明确定义检测目标、精度要求(mAP)和速度要求(FPS)，v11在这两方面有显著提升。</p>';
                    projectInfoHeader.parentNode.insertBefore(tipElement, projectInfoHeader.nextSibling);
                }
                
                if (projectMembersCard) projectMembersCard.classList.remove('hidden');
            } else if (progress >= 20 && progress < 40) {
                // 数据准备阶段 - YOLOv11优化重点：高质量数据与增强策略
                document.getElementById('action-data').classList.remove('hidden');
                
                // 显示数据集、项目信息和成员卡片
                if (datasetInfoCard) {
                    datasetInfoCard.classList.remove('hidden');
                    // 动态添加YOLOv11特有提示
                    const datasetHeader = datasetInfoCard.querySelector('h2');
                    const tipElement = document.createElement('div');
                    tipElement.className = 'yolo11-tip bg-primary/5 border-l-4 border-primary p-3 mb-4';
                    tipElement.innerHTML = '<p class="text-sm"><i class="fa fa-info-circle text-primary mr-2"></i><strong>YOLOv11优化提示:</strong> v11对数据质量要求更高，建议增加小目标样本数量，并启用更丰富的数据增强策略。</p>';
                    datasetHeader.parentNode.insertBefore(tipElement, datasetHeader.nextSibling);
                }
                
                if (projectInfoCard) projectInfoCard.classList.remove('hidden');
                if (projectMembersCard) projectMembersCard.classList.remove('hidden');
            } else if (progress >= 40 && progress < 60) {
                // 模型训练阶段 - 开始 - YOLOv11优化重点：特有参数配置
                document.getElementById('action-training').classList.remove('hidden');
                
                // 显示数据集、项目信息、成员和训练指标卡片
                if (trainingMetricsCard) {
                    trainingMetricsCard.classList.remove('hidden');
                    // 动态添加YOLOv11特有提示
                    const trainingHeader = trainingMetricsCard.querySelector('h2');
                    const tipElement = document.createElement('div');
                    tipElement.className = 'yolo11-tip bg-primary/5 border-l-4 border-primary p-3 mb-4';
                    tipElement.innerHTML = '<p class="text-sm"><i class="fa fa-info-circle text-primary mr-2"></i><strong>YOLOv11优化提示:</strong> v11推荐使用较低学习率(0.0001)和较大epoch数量(100+)，并启用CBAM注意力机制。</p>';
                    trainingHeader.parentNode.insertBefore(tipElement, trainingHeader.nextSibling);
                }
                
                if (datasetInfoCard) datasetInfoCard.classList.remove('hidden');
                if (projectInfoCard) projectInfoCard.classList.remove('hidden');
                if (projectMembersCard) projectMembersCard.classList.remove('hidden');
            } else if (progress >= 60 && progress < 80) {
                // 模型训练阶段 - 进行中 - YOLOv11优化重点：超参数监控与调整
                document.getElementById('action-training').classList.remove('hidden');
                
                // 显示训练相关卡片和项目信息
                if (trainingMetricsCard) trainingMetricsCard.classList.remove('hidden');
                if (resourceUsageCard) resourceUsageCard.classList.remove('hidden');
                if (projectInfoCard) projectInfoCard.classList.remove('hidden');
                if (projectMembersCard) projectMembersCard.classList.remove('hidden');
            } else if (progress >= 80 && progress < 100) {
                // 模型评估阶段 - YOLOv11优化重点：效率与精度双维度评估
                document.getElementById('action-evaluation').classList.remove('hidden');
                
                // 显示评估相关卡片
                if (trainingMetricsCard) {
                    trainingMetricsCard.classList.remove('hidden');
                    // 动态添加YOLOv11特有提示
                    const trainingHeader = trainingMetricsCard.querySelector('h2');
                    const tipElement = document.createElement('div');
                    tipElement.className = 'yolo11-tip bg-primary/5 border-l-4 border-primary p-3 mb-4';
                    tipElement.innerHTML = '<p class="text-sm"><i class="fa fa-info-circle text-primary mr-2"></i><strong>YOLOv11优化提示:</strong> 评估时重点关注推理速度(FPS)，v11在保持高精度的同时可显著提升推理效率。</p>';
                    trainingHeader.parentNode.insertBefore(tipElement, trainingHeader.nextSibling);
                }
                
                if (resourceUsageCard) resourceUsageCard.classList.remove('hidden');
                if (projectInfoCard) projectInfoCard.classList.remove('hidden');
                if (activityLogCard) activityLogCard.classList.remove('hidden');
            } else if (progress >= 100) {
                // 部署上线阶段 - YOLOv11优化重点：量化压缩与推理优化
                document.getElementById('action-deployment').classList.remove('hidden');
                
                // 显示所有卡片，添加部署优化提示
                if (resourceUsageCard) {
                    resourceUsageCard.classList.remove('hidden');
                    // 动态添加YOLOv11特有提示
                    const resourceHeader = resourceUsageCard.querySelector('h2');
                    const tipElement = document.createElement('div');
                    tipElement.className = 'yolo11-tip bg-primary/5 border-l-4 border-primary p-3 mb-4';
                    tipElement.innerHTML = '<p class="text-sm"><i class="fa fa-info-circle text-primary mr-2"></i><strong>YOLOv11优化提示:</strong> 部署时推荐使用ONNX量化和TensorRT加速，v11在量化后性能损失较小。</p>';
                    resourceHeader.parentNode.insertBefore(tipElement, resourceHeader.nextSibling);
                }
                
                if (projectInfoCard) projectInfoCard.classList.remove('hidden');
                if (trainingMetricsCard) trainingMetricsCard.classList.remove('hidden');
                if (activityLogCard) activityLogCard.classList.remove('hidden');
            }
        }
        
        // 加载项目数据
        function loadProjectData(projectId) {
            const project = projectData[projectId] || projectData['1']; // 默认使用ID为1的数据
            
            // 更新页面标题和面包屑
            document.title = `${project.name} - YOLO Vision AI Platform`;
            document.getElementById('breadcrumb-project-name').textContent = project.name;
            
            // 更新项目基本信息
            document.getElementById('project-title').textContent = project.name;
            document.getElementById('project-id').textContent = project.projectId;
            document.getElementById('project-description').textContent = project.description;
            document.getElementById('project-type').textContent = project.type;
            document.getElementById('project-date-created').textContent = project.created;
            document.getElementById('project-date-due').textContent = project.due;
            document.getElementById('project-creator').textContent = `创建人：${project.creator}`;
            document.getElementById('project-model-version').textContent = project.modelVersion;
            
            // 更新项目状态
            const statusElement = document.getElementById('project-status');
            statusElement.textContent = project.status;
            
            // 根据状态设置不同的样式
            if (project.status === '进行中') {
                statusElement.className = 'px-2 py-1 text-xs rounded-full bg-warning/10 text-warning';
            } else if (project.status === '已完成') {
                statusElement.className = 'px-2 py-1 text-xs rounded-full bg-success/10 text-success';
            } else if (project.status === '已暂停') {
                statusElement.className = 'px-2 py-1 text-xs rounded-full bg-dark-2/10 text-dark-2';
            }
            
            // 更新进度信息
            document.getElementById('progress-percentage').textContent = `${project.progress}%`;
            document.getElementById('progress-bar').style.width = `${project.progress}%`;
            
            // 更新数据集信息
            document.getElementById('dataset-name').textContent = project.datasetName;
            document.getElementById('dataset-count').textContent = project.datasetCount;
            
            // 更新训练信息
            document.getElementById('training-percentage').textContent = `${project.progress}%`;
            document.getElementById('training-progress-bar').style.width = `${project.progress}%`;
            document.getElementById('current-epoch').textContent = project.currentEpoch;
            document.getElementById('total-epochs').textContent = project.totalEpochs;
            document.getElementById('current-batch').textContent = project.currentBatch;
            document.getElementById('total-batch').textContent = project.totalBatch;
            document.getElementById('elapsed-time').textContent = project.elapsedTime;
            
            // 根据进度更新步骤样式
            updateProgressSteps(project.progress);
            
            // 根据进度动态显示内容
            updateContentByProgress(project.progress);
        }
        
        // 更新进度步骤样式 - YOLOv11优化版
        function updateProgressSteps(progress) {
            // 获取所有步骤元素
            const steps = document.querySelectorAll('.flex-col.items-center.relative');
            
            // 根据进度更新步骤样式
            if (progress >= 20) { // 步骤1完成
                steps[0].querySelector('div').className = 'w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center mb-2';
                steps[0].querySelector('span').className = 'text-sm font-medium';
            }
            
            if (progress >= 40) { // 步骤2完成
                steps[1].querySelector('div').className = 'w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center mb-2';
                steps[1].querySelector('span').className = 'text-sm font-medium';
            }
            
            if (progress >= 60) { // 步骤3完成或进行中
                steps[2].querySelector('div').className = 'w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center mb-2';
                steps[2].querySelector('span').className = 'text-sm font-medium';
            }
            
            if (progress >= 80) { // 步骤4完成或进行中
                steps[3].querySelector('div').className = 'w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center mb-2';
                steps[3].querySelector('span').className = 'text-sm font-medium';
            }
            
            if (progress >= 100) { // 所有步骤完成
                steps[4].querySelector('div').className = 'w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center mb-2';
                steps[4].querySelector('span').className = 'text-sm font-medium';
            }
        }
        
        // 初始化页面
        document.addEventListener('DOMContentLoaded', function() {
            const projectId = getProjectId();
            loadProjectData(projectId);
            
            // 初始化训练指标图表
            const trainingCtx = document.getElementById('trainingChart').getContext('2d');
            const trainingChart = new Chart(trainingCtx, {
                type: 'line',
                data: {
                    labels: ['0', '5', '10', '15', '20', '25'],
                    datasets: [
                        {
                            label: 'mAP',
                            data: [0.42, 0.58, 0.67, 0.75, 0.81, 0.87],
                            borderColor: '#165DFF',
                            backgroundColor: 'rgba(22, 93, 255, 0.1)',
                            tension: 0.4,
                            fill: true
                        },
                        {
                            label: '准确率',
                            data: [0.55, 0.68, 0.75, 0.82, 0.87, 0.92],
                            borderColor: '#36CFC9',
                            backgroundColor: 'rgba(54, 207, 201, 0.1)',
                            tension: 0.4,
                            fill: true
                        },
                        {
                            label: '召回率',
                            data: [0.48, 0.62, 0.71, 0.79, 0.85, 0.90],
                            borderColor: '#52C41A',
                            backgroundColor: 'rgba(82, 196, 26, 0.1)',
                            tension: 0.4,
                            fill: true
                        },
                        {
                            label: '损失值',
                            data: [0.85, 0.56, 0.38, 0.25, 0.15, 0.08],
                            borderColor: '#FF4D4F',
                            backgroundColor: 'rgba(255, 77, 79, 0.1)',
                            tension: 0.4,
                            fill: true
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'top',
                        },
                        tooltip: {
                            mode: 'index',
                            intersect: false,
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            max: 1
                        }
                    }
                }
            });
            
            // 初始化存储使用趋势图表
            const storageCtx = document.getElementById('storageChart').getContext('2d');
            const storageChart = new Chart(storageCtx, {
                type: 'bar',
                data: {
                    labels: ['5月', '6月', '7月(当前)'],
                    datasets: [
                        {
                            label: '存储使用 (GB)',
                            data: [1.2, 2.8, 4.2],
                            backgroundColor: [
                                'rgba(22, 93, 255, 0.7)',
                                'rgba(22, 93, 255, 0.7)',
                                'rgba(22, 93, 255, 0.9)'
                            ],
                            borderColor: [
                                'rgba(22, 93, 255, 1)',
                                'rgba(22, 93, 255, 1)',
                                'rgba(22, 93, 255, 1)'
                            ],
                            borderWidth: 1
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'top',
                        },
                        tooltip: {
                            mode: 'index',
                            intersect: false,
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            max: 10,
                            title: {
                                display: true,
                                text: 'GB'
                            }
                        }
                    }
                }
            });
            
            // 设置页面加载动画效果
            const cards = document.querySelectorAll('.shadow-card');
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('opacity-100', 'translate-y-0');
                        entry.target.classList.remove('opacity-0', 'translate-y-4');
                    }
                });
            }, { threshold: 0.1 });
            
            cards.forEach(card => {
                card.classList.add('transition-all', 'duration-500', 'opacity-0', 'translate-y-4');
                observer.observe(card);
            });
        });
    </script>
</body>
</html>